<div>

    <h2 translate="sakuraApp.shopDomain.home.title">ShopDomain</h2>

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <button class="btn btn-primary" data-toggle="modal" data-target="#saveShopDomainModal" ng-click="clear()">
                    <span class="glyphicon glyphicon-flash"></span> <span translate="sakuraApp.shopDomain.home.createLabel">Create a new ShopDomain</span>
                </button>
            </div>
            <div class="col-md-8">
                <form name="searchForm" class="form-inline">
                    <div class="form-group">
                        <input type="text" class="form-control" ng-model="searchQuery" id="searchQuery" placeholder="query">
                    </div>
                    <button class="btn btn-info" ng-click="search()"><span class="glyphicon glyphicon-search"></span> <span>Search a ShopDomain</span>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="saveShopDomainModal" tabindex="-1" role="dialog" aria-labelledby="myShopDomainLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form name="editForm" role="form" novalidate ng-submit="save()" show-validation>

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                ng-click="clear()">&times;</button>
                        <h4 class="modal-title" id="myShopDomainLabel" translate="sakuraApp.shopDomain.home.createOrEditLabel">Create or edit a ShopDomain</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>ID</label>
                            <input type="text" class="form-control" name="id"
                                   ng-model="shopDomain.id" readonly>
                        </div>

                        <div class="form-group">
                            <label translate="sakuraApp.shopDomain.dft">Dft</label>
                            <input type="checkbox" class="form-control" name="dft"
                                   ng-model="shopDomain.dft">

                        </div>
                        <div class="form-group">
                            <label translate="sakuraApp.shopDomain.domain">Domain</label>
                            <input type="text" class="form-control" name="domain"
                                   ng-model="shopDomain.domain" required>

                            <div ng-show="editForm.domain.$invalid">
                                <p class="help-block"
                                   ng-show="editForm.domain.$error.required" translate="entity.validation.required">
                                    This field is required.
                                </p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label translate="sakuraApp.shopDomain.disabled">Disabled</label>
                            <input type="checkbox" class="form-control" name="disabled"
                                   ng-model="shopDomain.disabled">

                        </div>

                        <div class="form-group">
                            <label translate="sakuraApp.shopDomain.shop">shop</label>
                            <select class="form-control" name="shop" ng-model="shopDomain.shop.id" ng-options="shop.id as shop.shopName for shop in shops">
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
                            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span translate="entity.action.cancel">Cancel</span>
                        </button>
                        <button type="submit" ng-disabled="editForm.$invalid" class="btn btn-primary">
                            <span class="glyphicon glyphicon-save"></span>&nbsp;<span translate="entity.action.save">Save</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteShopDomainConfirmation">
        <div class="modal-dialog">
            <div class="modal-content">
                <form name="deleteForm" ng-submit="confirmDelete(shopDomain.id)">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                ng-click="clear()">&times;</button>
                        <h4 class="modal-title" translate="entity.delete.title">Confirm delete operation</h4>
                    </div>
                    <div class="modal-body">
                        <p translate="sakuraApp.shopDomain.delete.question" translate-values="{id: '{{shopDomain.id}}'}">Are you sure you want to delete this ShopDomain?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
                            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span translate="entity.action.cancel">Cancel</span>
                        </button>
                        <button type="submit" ng-disabled="deleteForm.$invalid" class="btn btn-danger">
                            <span class="glyphicon glyphicon-remove-circle"></span>&nbsp;<span translate="entity.action.delete">Delete</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th translate="sakuraApp.shopDomain.dft">Dft</th>
                    <th translate="sakuraApp.shopDomain.domain">Domain</th>
                    <th translate="sakuraApp.shopDomain.disabled">Disabled</th>
                    <th translate="sakuraApp.shopDomain.shop">shop</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="shopDomain in shopDomains">
                    <td><a ui-sref="shopDomainDetail({id:shopDomain.id})">{{shopDomain.id}}</a></td>
                    <td>{{shopDomain.dft}}</td>
                    <td>{{shopDomain.domain}}</td>
                    <td>{{shopDomain.disabled}}</td>
                    <td>{{shopDomain.shop.shopName}}</td>
                    <td>
                        <button type="submit"
                                ui-sref="shopDomainDetail({id:shopDomain.id})"
                                class="btn btn-info btn-sm">
                            <span class="glyphicon glyphicon-eye-open"></span>&nbsp;<span translate="entity.action.view"> View</span>
                        </button>
                        <button type="submit"
                                ng-click="showUpdate(shopDomain.id)"
                                class="btn btn-primary btn-sm">
                            <span class="glyphicon glyphicon-pencil"></span>&nbsp;<span translate="entity.action.edit"> Edit</span>
                        </button>
                        <button type="submit"
                                ng-click="delete(shopDomain.id)"
                                class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-remove-circle"></span>&nbsp;<span translate="entity.action.delete"> Delete</span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <nav>
            <ul class="pagination">
                <li ng-show="links['first']" ng-click="loadPage(links['first'])"><a>&lt;&lt;</a></li>
                <li ng-show="links['prev']" ng-click="loadPage(links['prev'])"><a>&lt;</a></li>
                <li ng-show="page > 2" ng-click="loadPage(page - 2)"><a>{{page - 2}}</a></li>
                <li ng-show="page > 1" ng-click="loadPage(page - 1)"><a>{{page - 1}}</a></li>
                <li class="active"><a>{{page}}</a></li>
                <li ng-show="page < links['last']" ng-click="loadPage(page + 1)"><a>{{page + 1}}</a></li>
                <li ng-show="page < links['last'] - 1" ng-click="loadPage(page + 2)"><a>{{page + 2}}</a></li>
                <li ng-show="links['next']" ng-click="loadPage(links['next'])"><a>&gt;</a></li>
                <li ng-show="links['last']" ng-click="loadPage(links['last'])"><a>&gt;&gt;</a></li>
            </ul>
        </nav>
    </div>
</div>
